<template>
    <div class="Playlist-out">
      <div class="details-left">
         <div class="title"><i class="el-icon-arrow-left" @click="$router.go(-1)"></i> 视频详情</div>
          <div class="play-video" >
          <video :src="playMv" style="width:100%;height:100%;object-fit:fill"  controls="controls"></video>
         </div>
         <div class="userInfo">
           <img :src="videoData.cover" alt="">
           <p >{{videoData.name}}</p>
         </div>
           <div class="introduce">
            <h3>{{videoData.desc}}</h3>
            <div class="introduce-num">
              <span>发布:</span> <span class="p1">{{videoData.publishTime}}</span>
              <span  class="p1">播放:</span> <span>{{videoData.duration | numberFormat}}</span>
            </div>
         </div>
         <div class="operate">
            <div><i class="iconfont icon-good"></i>赞</div>
            <div style="margin:0 20px;"><i class="iconfont icon-xihuan"></i>收藏</div>
            <div><i class="iconfont icon-zhuanfa"></i>分享</div>
         </div>
        <discuss
        :Commentlist=Commentlist
        :hotComments=hotComments
        @pading=pading
         :total=total
        />
      </div> 
       <div class="details-right">
         <div class="title"> 相关推荐</div>
         <div class="related" v-for="(item,i) in Related" :key="i" @click="relatedetail(item)">
             <img :src="item.cover" alt="">
             <div class="related-item">
              <div >{{item.name}}</div>
              <div style="color:#aaa">{{item.artistName}}</div>
             </div>
         </div>
       </div>
      </div>
</template>

<script>
import discuss from "@/components/MusicDetails/subpackage/discuss"
import dayjs from 'dayjs'
  export default {
    data() {
      return {
        Related:[],
        playMv:'',
        textarea:'',
        total:0,
        Commentlist:[],
        hotComments:[],
        videoData:{}
      }
    },
    components:{
     discuss
    },
    computed:{
      // videoData(){
      //   return this.$Store.state.homePage.video
      // }
    },
    filters: {
			  numberFormat: function (value) {
			  	    let unit = '';
		            var k = 10000,
	                sizes = ['', '万', '亿', '万亿'],
	                i;
	                if(value < k){
	                    value =value;
	                }else{
	                    i = Math.floor(Math.log(value) / Math.log(k));
	                    value = ((value / Math.pow(k, i))).toFixed(2);
	                    unit = sizes[i];
	                }
			        return value+unit;
			  }
			},
    methods: {
      relatedetail(item){  //点击相关视频获取详情
            this.$router.push(`/Mvdetails?id=${item.id}`)
      },
     async getVideoDetail(){ 
    //  获取Mv详情
        const {data:res} =await this.$request("/mv/detail",{
          mvid:this.$route.query.id
        })
         this.videoData = res.data;     
      },
      pading(num){  //分页评论
      this.getdiscuss(num)
      },
      async getdiscuss(num=1){  
      // 获取Mv评论
     
      const {data:res} =await this.$request("/comment/mv",{
          id:this.$route.query.id,
          offset:num*20,
          limit:20,
        })
        if(res.code!==200) return
        this.Commentlist=res.comments
        this.hotComments=res.topComments
        this.total=res.total/20
       
      },
    async  getRelated(){  //获取相关视频
  const {data:res}=await this.$request("/simi/mv",{
          mvid:this.$route.query.id
        })
         console.log(res)
        if(res.code!==200) return
        
        this.Related=res.mvs
     },
     async getVideoUrl(){   
       //获取播放Mv地址
     if(this.$route.query.vid!==''){
        const {data:res}=await this.$request("/Mv/url",{
         id:this.$route.query.id
       })
        this.playMv=res.data.url
     }
     }
     
    },
    mounted(){
      console.log(this.$route.query.vid,this.$route.query.id)
       this.getRelated() 
     this.getVideoUrl()
       this.getdiscuss()
      this.getVideoDetail()
    },
    watch:{
      $route(){
    console.log("路由发生变化")
        this.getRelated() 
       this.getVideoUrl()
      this.getdiscuss()
      this.getVideoDetail()
      }
    }
  }
</script>

<style lang="less" scoped>
.Playlist-out{
 width: 1300px;
 margin:70px 140px;
 position: relative;

   .title{
     font-size:18px;
    //  font-weight:600;
    margin-bottom:30px;
     color:#000;
   }
    .details-left{
      width:975px;
      height:100%;
       .play-video{
        width:800px;
        height:450px;
  }
  .userInfo{
    display:flex;
    align-items:center;
     margin-top:10px;
    img{
      width:40px;
      height:40px;
      border-radius:50%;
    }
    p{
      padding-left:10px;
    }
  }
  .introduce{
     margin-top:10px;
    h2{
      font-weight:600;
    }
    .introduce-num{
      margin-top:10px;
      font-size:12px;

      .p1{
        padding:0 10px;
      }
    }
  }
  .operate{
    margin-top:10px;
    width:100%;
    height:40px;
    display:flex;
     align-items:center;
    div{
      width:100px;
      height:30px;
      border:1px solid #aaa;
      border-radius:10px;
      text-align:center;
      line-height:30px;
      i{
        margin-right:8px;
      }
    &:hover{
      background-color:#ccc;
    }
    
  }
}
.criticism{
  margin:20px 0;
}
    }
     .details-right{
      width:455px;
      height:100%;
      position:absolute;
      top:-10px;
      right:0;
      .related{
        width:400px;
        height:120px;
        display:flex;
        align-items:center;
        img{
          width:200px;
          height:100px;
          border-radius:10px;
        }
        .related-item{
        width:200px;
        height:100%;
         div{
            padding:20px;
            font-size:12px;
            color:#000;
         }
        }
      }
    }
 
}
    
</style>